<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帖子列表</title>
    <style>
        /* 简单样式 */
        .post-item {
            border: 1px solid #ccc;
            padding: 15px;
            margin: 10px 0;
        }
        .post-item .username {
            font-weight: bold;
        }
        .post-item .interaction {
            margin-top: 10px;
        }
        .post-item img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <h1>帖子列表</h1>

    <div id="posts-container"></div>  <!-- 帖子展示区域 -->

    <script>
        // 获取并显示帖子数据
        function fetchPosts() {
            fetch('http://127.0.0.1:8080/api/posts')  // 获取后端提供的帖子数据
                .then(response => response.json())
                .then(data => {
                    const postsContainer = document.getElementById("posts-container");
                    postsContainer.innerHTML = "";  // 清空现有内容

                    data.forEach(post => {
                        const postElement = document.createElement("div");
                        postElement.classList.add("post-item");
                        postElement.innerHTML = `
                            <div class="username">${post.username}</div>
                            <div class="location">${post.location}</div>
                            <div class="content">${post.content}</div>
                            ${post.image_url ? `<img src="${post.image_url}" alt="Post Image" class="post-image">` : ""}
                            <div class="interaction">
                                <span>点赞：${post.likes}</span>
                                <span>评论：${post.comments}</span>
                            </div>
                        `;
                        postsContainer.appendChild(postElement);
                    });
                })
                .catch(error => {
                    console.error('获取帖子数据失败:', error);
                    alert('获取数据失败，请稍后重试');
                });
        }

        // 页面加载时自动调用
        window.onload = function() {
            fetchPosts();  // 获取并展示帖子数据
        }
    </script>

</body>
</html>